<!DOCTYPE html>
<html>
<head>
    <title>Demo 4 - with Navigation Buttons</title>
    <link href="themes/4/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/4/js-image-slider.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="div1"><h2>Demo 4 - Customize Navigation Controls</h2>
        <p>Demos: <a href="demo1.html">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html" class="current">4</a>
        <a href="demo5.html">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
    </div>
    
    
    <div id="sliderFrame">
        <div id="slider">
            <div style="float: left">
                <img src="images/slider-1.jpg" alt="#htmlcaption1" />
            </div>
            <div style="float: left">
            <img src="images/slider-2.jpg" alt="#htmlcaption2" />
            </div>
            <div style="float: left">
            <img src="images/slider-3.jpg" alt="#htmlcaption3" />
            </div>
            <div style="float: left">
            <img src="images/slider-4.jpg" alt="#htmlcaption4" />
            </div>
        </div>
        <!--Custom navigation buttons on both sides-->
        <div class="group1-Wrapper">
            <a onclick="imageSlider.previous()" class="group1-Prev"></a>
            <a onclick="imageSlider.next()" class="group1-Next"></a>
        </div>
        <!--thumbnails-->
        <div id="thumbs">
            <!-- navigation buttons in the thumbnails bar -->
            <a onclick="imageSlider.previous()" class="group2-Prev"></a>
            <a id='auto' onclick="switchAutoAdvance()"></a>
            <a onclick="imageSlider.next()" class="group2-Next" style="margin-right:30px;"></a>
            <!--Each thumb-->
            <div class="thumb"><img src="images/thumb-1.gif" /></div>
            <div class="thumb"><img src="images/thumb-2.gif" /></div>
            <div class="thumb"><img src="images/thumb-3.gif" /></div>
            <div class="thumb"><img src="images/thumb-4.gif" /></div>
        </div>
        <div id="htmlcaption1" style="display: none;">
            <div style="width:190px;height:280px;display:inline-block;background:white url(images/caption1.jpg) no-repeat 0 0;border-radius:4px;"></div>
        </div>
        <div id="htmlcaption2" style="display: none;">
            <div style="width:190px;height:130px;display:inline-block;background:transparent url(images/caption2.gif) no-repeat 0 0;border-radius:4px;"></div>
        </div>
        <div id="htmlcaption3" style="display: none;">
            <div style="width:190px;height:240px;display:inline-block;background:white url(images/caption3.gif) no-repeat 0 0;border-radius:4px;"></div>
        </div>
        <div id="htmlcaption4" style="display: none;">
            <div style="width:190px;height:240px;display:inline-block;background:white url(images/caption4.gif) no-repeat 0 0;border-radius:4px;"></div>
        </div>
    </div>


    <div class="div2">
        <ul>
            <li>
                <p>In Demo 1 and Demo 2, we have introduced two ways of navigation: the built-in <b>Navigation Bullets</b> and the <b>Thumbnails</b>.</p>
                <p>This demo introduces another type of navigation - <b>Navigation Buttons</b>.</p>
                <p>Visit <a href="http://www.menucool.com/slider/javascript-image-slider-demo4" target="_blank">Online Demo 4</a> to see how the two groups of Navigation Buttons
                in this demo were built: the <em><span class="green">Previous</span></em> and 
                <em><span class="green">Next</span></em> button on both sides of the slider, and the <em>
                <span class="green">Previous, Next, Play/Pause</span></em> buttons inside the thumbnails bar.</p>
            </li>
            <li>If there are many thumbnails and the containing block does not have enough room to show them, you can make this slider work together with our jQuery Slider. See <a href="http://www.menucool.com/slider/jquery-slideshow">jQuery Slideshow</a>.</li>
            <li>This demo needs a valid license for the thumbnail support. It won't work on the production server (though it works locally) if not licensed.</li>
        </ul>
    </div>
    <script type="text/javascript">
        //The following script is for the group 2 navigation buttons.
        function switchAutoAdvance() {
            imageSlider.switchAuto();
            switchPlayPauseClass();
        }
        function switchPlayPauseClass() {
            var auto = document.getElementById('auto');
            var isAutoPlay = imageSlider.getAuto();
            auto.className = isAutoPlay ? "group2-Pause" : "group2-Play";
            auto.title = isAutoPlay ? "Pause" : "Play";
        }
        switchPlayPauseClass();
    </script>
</body>
</html>
